<template>
  <div class="video_details" id="video_details" :class="{ box_fixed: isFixed }" v-if="!loading">
    <!-- 视频信息  -->
    <div class="header centerbox" :class="{ fixed: isFixed }" ref="headerBox">
      <!-- <img :src="datanews.thumpic" class="head_img" @click="goDouyinPage(datanews.url)" /> -->
      <img :src="datanews.thumpic" class="head_img" @click="ImgPreview(datanews.thumpic)" />
      <div class="head_tit">
        <div class="titless">{{ datanews.title }}</div>
        <p
          v-if="datanews.release_time_stamp"
        >发布时间 : {{ timestamp(datanews.release_time_stamp, "Y-M-D h:m") }}</p>
        <div class="duration" v-if="datanews.duration">
          视频时长 :
          <span>{{ format_time(datanews.duration) }}</span>
        </div>
      </div>
      <!-- 收藏 -->
      <div class="collect_btn" @click="collectFn" v-if="!awemecollection">
        <i></i>
        <span>收藏</span>
      </div>
      <div class="collect_btn active" @click="unCollectFn" v-else>
        <i></i>
        <span>已收藏</span>
      </div>
    </div>
    <!-- 视频相关数据 -->
    <div class="datanum centerbox">
      <div>
        <span>{{ format_num(datanews.total_favorite) }}</span>点赞总数
      </div>
      <div>
        <span>{{ format_num(datanews.total_comment) }}</span>评论总数
      </div>
      <div>
        <span>{{ format_num(datanews.total_share) }}</span>转发总数
      </div>
    </div>
    <div class="lines"></div>
    <!-- 该视频作者信息 -->
    <div class="video_talent centerbox" v-if="datanew" @click="gototalent(datanew.authorid)">
      <img :src="datanew.logo" v-errorImg:talent />
      <div class="author">
        <div>
          <p>{{ datanew.nickname }}</p>
          抖音号:{{ datanew.uniqueid }}
        </div>
        <img src="../../assets/four/rightArrow.png" />
      </div>
    </div>
    <div class="lines"></div>
    <!-- tab切换页 -->
    <van-tabs
      v-model="activeName"
      title-class="tab-name"
      :sticky="true"
      offset-top="1.82rem"
      @scroll="tabScrollFn"
      scrollspy
      :duration="0.1"
    >
      <van-tab title="基础信息" name="a">
        <basicdata class="model_interval" />
      </van-tab>
      <van-tab title="商品分析" name="b" v-if="datanews && datanews.pro_count">
        <goodsdata class="model_interval" />
      </van-tab>
      <van-tab title="观众分析" name="c">
        <viewerdata class="model_interval" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import basicdata from './basicdata.vue';
import goodsdata from './goodsdata.vue';
import viewerdata from './viewerdata.vue';
export default {
  data() {
    return {
      activeName: 'a',
      datanews: [],
      datanew: '',
      awemecollection: false, //是否收藏
      isFixed: false,
      tabIsfixed: false, //  tab是否吸顶
      loading: true
    };
  },
  components: { basicdata, goodsdata, viewerdata },
  created() {},
  mounted() {
    window.onscroll = e => {
      this.setHeaderFixed();
    };
    this.getdatanews();
  },
  watch: {
    beforeDestroy() {
      window.removeEventListener('scroll', this.setHeaderFixed); //释放window的滑动事件
    }
  },
  methods: {
    tabScrollFn(callbackPms) {
      this.tabIsfixed = callbackPms.isFixed;
    },
    setHeaderFixed() {
      //设置顶部浮动方法
      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;
        this.fixedVal = elTop;
        this.isFristScroll = true;
      }
      let elHeight = headerBoxEl.offsetHeight;
      let windowHeight = window.screen.height;
      let documentHeight = document.body.offsetHeight || document.body.clientHeight;
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= this.fixedVal && documentHeight > windowHeight + elHeight) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 视频信息
    getdatanews() {
      this.$axios
        .get(`/api/aweme/info?api-version=2&awemeid=${this.$route.query.id}`)
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            this.datanews = res.data.data.aweme;
            this.awemecollection = res.data.data.awemecollection; // 添加收藏
            this.datanew = res.data.data.author;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    collectFn() {
      let that = this;
      //收藏接口
      this.awemecollection = !this.awemecollection;
      let url = 'api/collection/InsertCollection';
      let pms = {
        CollectId: this.$route.query.id,
        Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
      };
      this.$axios
        .post(url, pms)
        .then(res => {
          if (res.data.code == 0) {
            this.awemecollection = true;
            this.$toast.success('收藏成功');
          }else if(res.data.code == 1003){
            this.$toast('权限不足，请升级会员');
            this.$popVip({
              show: true,
              obj: that.$router,
              // minLeve: that.minLeve
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    unCollectFn() {
      //收藏接口
      let url = '/api/collection/CancelCollection';
      let pms = {
        CollectId: this.$route.query.id,
        Module: 2 //模块 1达人 2视频 3音乐 4话题 5商品
      };
      this.$axios
        .post(url, pms)
        .then(res => {
          if (res.data.code == 0) {
            this.awemecollection = false;
            this.$toast.success('已取消收藏');
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    gototalent(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id: id } });
    },
    //跳三方抖音视频页面
    goDouyinPage(url) {
      location.href = url;
    },
    // 图片预览（放大）
    ImgPreview(imgurl) {
      ImagePreview({
        images: [imgurl],
        closeable: true
      });
    }
  }
};
</script>
<style lang="less" scoped>
.model_interval {
  padding-top: 0.01rem !important;
}
#video_details {
  padding-top: 0.4rem;
  &.box_fixed{
    padding-top: 2.3rem;
  }
  // 版心
  .centerbox {
    width: 9.2rem;
    margin: 0 auto;
  }
  // 分割线
  .lines {
    width: 100%;
    background: #f1f1f1;
    height: 0.213333rem;
  }
  // 视频信息
  .header {
    position: relative;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    .head_img {
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      background-color: #5e6265;
      border-radius: 0.266rem;
      margin-right: 0.24rem;
      object-fit: cover;
    }
    .head_tit {
      .titless {
        width: 7.226rem;
        font-size: 0.426667rem;
        font-weight: 600;
        // height: 1.146667rem;
        // line-height: 0.58rem;
        color: #222;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      > p {
        font-size: 0.346667rem;
        line-height: 0.64rem;
        color: #888;
      }
      .duration {
        height: 0.48rem;
        font-size: 0.293333rem;
        line-height: 0.48rem;
        letter-spacing: 1px;
        color: #888;
        margin-bottom: 0.32rem; //距离分割线距离
        span {
          display: inline-block;
          width: 1.44rem;
          height: 0.48rem;
          color: #555;
          text-align: center;
          background-color: #fff7ed;
          border-radius: 0.053333rem;
        }
      }
    }
    // 吸顶样式
    &.fixed {
      position: fixed;
      top: 0;
      width: 10rem;
      margin-top: 0;
      padding: 0.4rem 0.4rem;
      z-index: 19;
      box-sizing: border-box;
      background: #fff;
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.18666rem;
        background-color: #f1f1f1;
      }
      .head_tit {
        p,
        .duration {
          display: none;
        }
      }
      .collect_btn {
        display: none;
      }
      .head_img {
        width: 1.013333rem;
        height: 1.01333rem;
      }
    }
  }
  // 视频相关数据
  .datanum {
    display: flex;
    justify-content: space-around;
    div {
      span {
        display: block;
        font-family: DINPro-Medium;
        font-size: 0.453333rem;
        color: #222;
        padding-top: 0.64rem;
        padding-bottom: 0.133333rem;
        text-align: center;
      }
      font-size: 0.32rem;
      color: #888;
      text-align: center;
      padding-bottom: 0.666667rem;
    }
  }
  // 该视频作者信息
  .video_talent {
    display: flex;
    padding: 0.4rem 0;
    img {
      display: block;
      width: 1.333rem;
      height: 1.333rem;
      border-radius: 50%;
      margin-right: 0.2666rem;
    }
    .author {
      width: 7.52rem;
      display: flex;
      justify-content: space-between;
      div {
        p {
          letter-spacing: 1px;
          font-weight: 600;
          color: #222;
          padding-top: 0.24rem;
        }
        font-size: 0.32rem;
        color: #888;
      }
      img {
        display: block;
        width: 0.186667rem;
        height: 0.32rem;
        transform: translateY(0.55rem);
      }
    }
  }
  // 添加收藏
  .collect_btn {
    position: absolute;
    // top: 1.1rem;
    bottom: .6rem;
    right: 0;
    font-size: 0;
    text-align: center;
    width: 1.866667rem;
    height: 0.8rem;
    background-color: #fd7f2c;
    border: 1px solid #fd7f2c;
    border-radius: 0.1333rem;
    border: 1px solid;
    color: #fff;
    transition: all linear 100ms;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      display: inline-block;
      width: 0.32rem;
      height: 0.32rem;
      vertical-align: middle;
      background: url('../../assets/img/collect.png');
      background-size: 100% 100%;
      background-position: 50%;
    }

    span {
      display: inline-block;
      font-size: 0.346667rem;
      vertical-align: middle;
      margin-left: 0.12rem;
    }

    &.active {
      background-color: #fff;
      border: 1px solid #fd7f2c;
      color: #fd7f2c;
      i {
        display: none;
      }
    }
  }
}
</style>
